<template>
  <view class="user">
    <view class="title"><image src="../../static/图层%203@2x.png" mode=""></image></view>
    <view class="my-ordere">
      <view class="row1">
        <text class="order">我的订单</text>
        <view class="row1-right">
          <text class="allOrder">查看全部订单</text>
          <uni-icons type="arrowright" size="12"></uni-icons>
        </view>
      </view>
      <view class="row2">
        <view class="noPay">
          <image src="../../static/待付款.png" mode=""></image>
          <text class="txt">待付款</text>
        </view>
        <view class="noPay">
          <image src="../../static/待发货.png" mode=""></image>
          <text class="txt">待发货</text>
        </view>
        <view class="noPay">
          <image src="../../static/待收货.png" mode=""></image>
          <text class="txt">待收货</text>
        </view>
        <view class="noPay">
          <image src="../../static/已完成.png" mode=""></image>
          <text class="txt">已完成</text>
        </view>
      </view>
    </view>
    <view class="my-rights">
      <view class="row1">
        <text>我的权益</text>
      </view>
      <view class="row2">
        <view class="row2-item">
          <image src="../../static/我的拼团@2x.png" mode=""></image>
          <text>我的拼团</text>
        </view>
        <view class="row2-item">
          <image src="../../static/团队@2x.png" mode=""></image>
          <text>我的组团</text>
        </view>
        <view class="row2-item">
          <image src="../../static/账单%20资金管理@2x.png" mode=""></image>
          <text>资金管理</text>
        </view>
        <view class="row2-item">
          <image src="../../static/入驻申请@2x.png" mode=""></image>
          <text>入住申请</text>
        </view>
        <view class="row2-item">
          <image src="../../static/推广@2x.png" mode=""></image>
          <text>推广分享</text>
        </view>
        <view class="row2-item">
          <image src="../../static/地址%20(3)@2x.png" mode=""></image>
          <text>地址管理</text>
        </view>
        <view class="row2-item">
          <image src="../../static/关于我们%20(2)@2x.png" mode=""></image>
          <text>关于我们</text>
        </view>
        <view class="row2-item">
          <image src="../../static/客服%20(3)@2x.png" mode=""></image>
          <text>售后服务</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.user {
  background-color: #f4f4f4;
  position: relative;
}
.title {
  width: 750rpx;
  height: 435rpx;
  image {
    width: 100%;
    height: 435rpx;
    z-index: -1;
  }
}

.my-ordere {
  position: absolute;
  top: 307rpx;
  width: 690rpx;
  height: 230rpx;
  background-color: cyan;
  margin-left: 29rpx;
  border-radius: 26rpx;
  .row1 {
    display: flex;
    justify-content: space-between;
    padding-left: 30rpx;
    padding-right: 19rpx;
    padding-top: 30rpx;
    .order {
      font-size: 30rpx;
      color: #333333;
    }
    .row1-right {
      .allOrder {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
  .row2 {
    margin-top: 41rpx;
    display: flex;
    justify-content: space-around;
    image {
      width: 47rpx;
      height: 48rpx;
    }
    .noPay {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .txt {
        margin-top: 28rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}

.my-rights {
  width: 691rpx;
  height: 384rpx;
  border-radius: 26rpx;
  background-color: cyan;
  position: absolute;
  top: 560rpx;
  left: 32rpx;
  .row1 {
    margin-left: 30rpx;
    margin-top: 30rpx;
    font-size: 30rpx;
    color: #333;
  }
  .row2 {
    margin-top: 45rpx;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .row2-item {
      flex: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      image {
        width: 40rpx;
        height: 40rpx;
      }
      text {
        font-size: 24rpx;
        color: #999;
        margin-top: 25rpx;
        margin-bottom: 60rpx;
      }
    }
  }
}
</style>
